<template>
  <!-- data数据中心 echarts -->
  <div :id="idName" style="width: 100%; height: 500px"></div>
</template>
  
  <script>
import * as echarts from "echarts";

export default {
  props: {
    //   option:{
    //     type:Object
    //   },
    idName: {
      type: String,
    },
    echartsData: {
      default: {},
    },
    isAxisChart: {
      type: Boolean,
      default: true,
    },
  },
  data () {
    return {
      option: {
        tooltip: {
          trigger: "axis",
        },
        color: [
          "#ff6750",
          "#f79f6f",
          "#f79f6f",
          "#f25e49",
          "#16dcb7",
          "#4098ff",
        ],

        legend: {
          data: ["新增机会", "重点机会"],
          bottom: "2%",
          icon: "roundRect",
        },

        grid: {
          left: "3%",
          right: "4%",
          bottom: "10%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: this.echartsData.xAxisData,
          },
        ],
        yAxis: [
          {
            type: "value",
            axisLine: {
              //y轴轴线
              show: false,
            },
            axisTick: {
              //刻度线
              show: false,
            },
          },
        ],
        series: [],
      },
      unxAxisOption: {
        color: ["#f79f6f", "#f25e49", "#16dcb7", "#4098ff"],
        tooltip: {
          //弹窗信息
          trigger: "item",
          formatter: "{b}&nbsp;&nbsp;&nbsp;&nbsp;  {c}&nbsp; {d}%",
        },
        legend: {
          bottom: "5%",
          left: "center",


        },
        // calculable: true,              // 默认关闭可计算特性
        series: [
          {
            name: "销售漏斗",
            type: "funnel",
            left: "10%",
            top: 10,
            //x2: 80,
            bottom: 0,
            width: "100%",
            height: "80%",
            //  将min设为数据的最小值实现漏斗图的矩形
            min: 40,
            //  max: 100,
            minSize: "20%", //与漏斗形状有关
            maxSize: "70%", //与漏斗形状有关
            sort: "descending",
            gap: 2,

            label: {
              show: true,
              position: "inside",
              formatter: "{b}{c}--{d}%",
              //  rich: {
              //      a: {
              //          color: '#555',
              //          fontSize: 14
              //      },
              //      b: {
              //      color: '#9F9F9F',
              //      fontSize: 14
              //      }
              //  }
            },
            labelLine: {
              length: 10,
              lineStyle: {
                width: 1,
                type: "solid",
              },
            },
            itemStyle: {
              borderColor: "#fff",
              borderWidth: 1,
            },
            emphasis: {
              label: {
                fontSize: 20,
              },
            },
            data: [],
          },
        ],
      },
    };
  },
  //数据自动刷新，必然需要一个监听机制告诉Echarts重新设置数据
  watch: {
    //观察option的变化
    echartsData: {
      handler (newVal, oldVal) {
        if (this.myChart) {
          if (newVal) {
            console.log(1);
          } else {
            console.log(2);
          }
        } else {
          console.log(3);
        }
      },
      deep: true, //对象内部属性的监听，关键。
    },
  },
  mounted () {
    this.$nextTick(() => {
      this.show();
    });
  },
  methods: {
    show () {

      var myChart = echarts.init(document.getElementById(`${this.idName}`));


      if (this.echartsData.legendHide) {
        this.unxAxisOption.legend.show = false;
        this.option.legend.show = false
      }
      if (this.echartsData.series[0].type === "bar") {
        this.option.xAxis[0].boundaryGap = true;
      }

      let legendData = this.echartsData.series.map((item, i) => {
        return item.name;
      }).join(",").split(',');
      this.option.legend.data = legendData;
      this.option.xAxis.data = legendData;




      if (this.isAxisChart) {
        this.option.series = this.echartsData.series;
        this.option.xAxis.data = this.echartsData.xAxisData;
        myChart.setOption(this.option);
      } else {
        this.unxAxisOption.series = this.echartsData.series;
        myChart.setOption(this.unxAxisOption);
      }


      // setTimeout(() => {

      window.addEventListener("resize", function () {
        myChart.resize();
      });
      // }, 200);
    },
  },
};
</script>
  
  <style>
</style>